﻿<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>个人简历</title>
		<meta name='viewport' content='width=device-width, 		initial-scale=1.0, maximum-scale=1.0'/>
		<link rel="stylesheet" href="css/swiper.min.css">
		<link rel="stylesheet" href="css/animate.min.css">
		<link rel="stylesheet" href="css/fakeLoader.css">
		<link rel="stylesheet" href="css/supermen-animate.css" />
		<link rel="stylesheet" href="css/supermen.css" />

	</head>
	<body>
		<div class="out"></div>
		<div class="fakeloader"></div>
		<div class="page-btn">
			<img src="img/web-swipe-tip_95ef4d6.png" />
		</div>
		<div class="radio-out" id="radio-out">
			<audio id="myAudio" preload loop autoplay src="http://test-img.gsxservice.com/0xuexitoutiao/audio/834729_tueqhuvo.mp3">
			</audio>
			<div class="radio">

			</div>
			<div class="radio-img">
			</div>
		</div>

		<div class="wraper ">
			<div class="swiper-container">
				<div class="swiper-wrapper">
					<div class="swiper-slide swiper-slide1">
						<div class="ani leftToR" swiper-animate-effect="SfadeInRight" swiper-animate-duration="0.6s" swiper-animate-delay="1.2s" >
							<img src="img/firstPage/leftToR.png" />
						</div>
						<div class="ani fadeinUp" swiper-animate-effect="fadeInUp" swiper-animate-duration="0.6s" swiper-animate-delay="1.8s">
							<img src="img/firstPage/upto.png" alt="" />
						</div>
						<div class="ani fadeinDown" swiper-animate-effect="fadeInDownAndFloat" swiper-animate-duration="20s" swiper-animate-delay="2.3s" >
							<img src="img/firstPage/fadeIndown.png" alt="" />
						</div>

						<div class="ani Engineer" swiper-animate-effect="fadeInDown" swiper-animate-duration="0.8s" swiper-animate-delay="4.0s">
							前端工程师
						</div>
						<div class="ani myname" swiper-animate-effect="zoomOut" swiper-animate-duration="0.8s" swiper-animate-delay="4.5s">
							万郁青
						</div>
						<div class="ani comein" swiper-animate-effect="bounceOut" swiper-animate-duration="1s" swiper-animate-delay="4.7s">
							前来
						</div>
						<div class="ani yingping" swiper-animate-effect="bounceOut" swiper-animate-duration="1s" swiper-animate-delay="5.1s">
							应聘
						</div>
						<div class="ani duanduang" swiper-animate-effect="zoomIn" swiper-animate-duration="0.8s" swiper-animate-delay="5.2s">
							<img src="img/duangduang.png" alt="" />
						</div>
					</div>

					<div class="swiper-slide swiper-slide2">
						<div class="ani ready" swiper-animate-effect="shake" swiper-animate-duration="1s" swiper-animate-delay="1.5s">
							<div>
								I'm Ready!
							</div>
						</div>
						<div class="ani updiv" swiper-animate-effect="fadeInLeft" swiper-animate-duration="1s" swiper-animate-delay="2.7s">
							<img src="img/secondPage/up.png" alt="" />
						</div>
						<div class="ani duang" swiper-animate-effect="zoomIn" swiper-animate-duration="0.6s" swiper-animate-delay="2.5s">
							<img src="img/secondPage/duang.png" alt="" />
						</div>
						<div class="ani huoli" swiper-animate-effect="bounceOut" swiper-animate-duration="1s" swiper-animate-delay="1.8s">
							<img src="img/secondPage/huoli.png" alt="" />
						</div>
						<div class="ani baofa" swiper-animate-effect="bounceOutAndShake" swiper-animate-duration="2s" swiper-animate-delay="2.1s">
							<img src="img/secondPage/baofa.png" alt="" />
						</div>
						<div class="ani chuzhong" swiper-animate-effect="bounceOut" swiper-animate-duration="2s" swiper-animate-delay="2.2s">
							<img src="img/secondPage/chuzhong.png" alt="" />
						</div>
						<div class="ani myself" swiper-animate-effect="bounceIn" swiper-animate-duration="1s" swiper-animate-delay="3.1s">
							<div>
								在寻找这样的我？
							</div>
						</div>
						<div class="ani down" swiper-animate-effect="fadeInRight" swiper-animate-duration="1s" swiper-animate-delay="2.7s">
							<img src="img/secondPage/down.png" alt="" />
						</div>
						<div class="ani supermen" swiper-animate-effect="fadeInUp" swiper-animate-duration="3s" swiper-animate-delay="1.5s">
							<img src="img/secondPage/supermen2.png" alt="" />
						</div>

						<div class="ani upto" swiper-animate-effect="fadeInUp" swiper-animate-duration="0.6s" swiper-animate-delay="0.6s" id="upto">
							<img src="img/secondPage/upto.png" alt="" />
						</div>
					</div>

				<div class="swiper-slide swiper-slide3">
						<div class="ani bigtext" swiper-animate-effect="zoomIn" swiper-animate-duration="1s" swiper-animate-delay="1.8s"></div>
						<div class="ani uptext" swiper-animate-effect="zoomIn" swiper-animate-duration="1s" swiper-animate-delay="2.0s">
							<div class="cmp-inner" >
								<div>● 两年的Web工作经验</div>
								<div>● 扎实的页面制作基础，根据UI设计图快速制作页面</div>
								<div>● 具备娴熟的设计技巧和优秀的逻辑思维能力，对原生Js有深入的理解</div>
								<div>● 积极主动沟通，推进设计优化，追求设计零误差</div>
								<div>● 热衷前端新技术的探究常识</div>
							</div>
						</div>
						<div class="ani bg" swiper-animate-effect="fadeInUp" swiper-animate-duration="0.6s" swiper-animate-delay="1.2s">
							<img src="img/ThirdPage/bg1.png" />
						</div>
						<div class="ani supermenBig" swiper-animate-effect="fadeInUp" swiper-animate-duration="1s" swiper-animate-delay="0.5s">
							<img src="img/ThirdPage/supermen.png" alt="" />
						</div>
						<div class="ani xuanzhuang" swiper-animate-effect="zoomIn" swiper-animate-duration="1s" swiper-animate-delay="0.9s">
							<div class="ani " swiper-animate-effect="rotate2d" swiper-animate-duration="1s" swiper-animate-delay="2.2s">
								<img src="img/ThirdPage/xuanzhuan.png" alt="" />
							</div>
						</div>
						<div class="ani upbig" swiper-animate-effect="fadeInLeft" swiper-animate-duration="1s" swiper-animate-delay="2.3s">
							<img src="img/ThirdPage/up.png" alt="" />
						</div>

						<div class="ani name" swiper-animate-effect="bounceOut" swiper-animate-duration="1.2s" swiper-animate-delay="3.1s">
							It's Me
						</div>
					</div>

					<div class="swiper-slide swiper-slide4">
						<div class="ani skill" swiper-animate-effect="bounceInDown" swiper-animate-duration="1s" swiper-animate-delay="1.2s">专业技能</div>
						<ul class="ani miniDiv" swiper-animate-effect="fadeInRight" swiper-animate-duration="1.5s" swiper-animate-delay="1.4s">
							<li>● 熟悉w3c标准</li>
							<li>● 熟练掌握Javascript、HTML、CSS、Ajax等前端开发技术</li>
							<li>● 熟悉解决各大浏览器兼容问题</li>
							<li>● 熟悉微信小程序开发</li>
							<li>● 熟悉移动端页面布局与响应式布局</li>
							<li>● 熟悉webpack,gulp等打包构建工具</li>
							<li>● 熟悉jQuery、Zepto等Js库</li>
							<li>● 熟悉VUE2.0全家桶，并有大量项目经验</li>
							<li>● 熟悉常用git指令</li>

						</ul>
						<div class="ani bigtext" swiper-animate-effect="zoomIn" swiper-animate-duration="1.5s" swiper-animate-delay="1.4s"></div>
						<div class="ani bigImg" swiper-animate-effect="fadeInLeft" swiper-animate-duration="1s" swiper-animate-delay="0.5s">
							<img src="img/ThirdPage/supermen.png" alt="" />
						</div>
						<div class="ani xuanzhuang" swiper-animate-effect="zoomIn" swiper-animate-duration="0.8s" swiper-animate-delay="1.3s">
						<div class="ani " swiper-animate-effect="rotate2d" swiper-animate-duration="1s" swiper-animate-delay="2s">
							<img src="img/ThirdPage/xuanzhuan.png" alt="" />
						</div>
						</div>


					</div>

					<div class="swiper-slide swiper-slide5">
						<div class="ani xiangmu" swiper-animate-effect="fadeInRight" swiper-animate-duration="1s" swiper-animate-delay="1.7s">项目经验</div>
						<div class="ani bigimg" swiper-animate-effect="fadeInLeft" swiper-animate-duration="1s" swiper-animate-delay="0.5s">
							<img src="img/ThirdPage/supermen.png" alt="" />
						</div>
						<div class="ani xuanzhuan" swiper-animate-effect="zoomIn" swiper-animate-duration="1s" swiper-animate-delay="0.9s">
							<div class="ani " swiper-animate-effect="rotate2d" swiper-animate-duration="1s" swiper-animate-delay="2.2s">
								<img src="img/ThirdPage/xuanzhuan.png" alt="" />
							</div>
						</div>
						<div class="ani redbg" swiper-animate-effect="fadeInLeft" swiper-animate-duration="1s" swiper-animate-delay="1.2s">
							<div class="redBg"></div>
						</div>
						<ul class="ani maintext" swiper-animate-effect="zoomIn" swiper-animate-duration="1s" swiper-animate-delay="2.5s">
							<li class="title">● ZOMAKE PC端官网</li>
							<li class="explain">涉及技术：Javascipt、传统div+css布局、Ajax前后台数据交互、VUE框架，解决主流浏览器兼容问题</li>
							<li class="title">● 学习头条 PC官网</li>
							<li class="explain">涉及技术：H5+CSS3布局、webpack+vue2.0+vuex实现项目构建、JSP实现详情页</li>
							<li class="title">● 微信小程序</li>
							<li class="explain">涉及技术：解决移动设备兼容问题、踩各种真机坑</li>
							<li class="title">● 学习号</li>
							<li class="explain">涉及技术：UEditor、VUE1.X、用户状态管理</li>
						</ul>
						<div class="ani opacitybg" swiper-animate-effect="zoomIn" swiper-animate-duration="1s" swiper-animate-delay="2.1s">
							<div class="opacitybg1"></div>
						</div>
					</div>

					<div class="swiper-slide swiper-slide6">
						<div class="ani bigBg" swiper-animate-effect="zoomOut" swiper-animate-duration="1s" swiper-animate-delay="0.5s">
							<img src="img/SixPage/bigBg.png" alt="" />
						</div>
						<div class="ani blueBg" swiper-animate-effect="fadeInUp" swiper-animate-duration="1s" swiper-animate-delay="1.1s">
							<div class="bluebg"></div>
						</div>
						<div class="ani leftbg" swiper-animate-effect="fadeInLeft" swiper-animate-duration="1s" swiper-animate-delay="2.7s">
							<img src="img/SixPage/left.png" alt="" />
						</div>
						<div class="ani upbg" swiper-animate-effect="fadeInUp" swiper-animate-duration="1s" swiper-animate-delay="1.1s">
							<img src="img/SixPage/up.png" alt="" />
						</div>
						<div class="ani rightbg" swiper-animate-effect="fadeInRight" swiper-animate-duration="1s" swiper-animate-delay="3.1s">
							<img src="img/SixPage/right.png" alt="" />
						</div>
						<div class="ani yunduo" swiper-animate-effect="fadeInUp" swiper-animate-duration="2s" swiper-animate-delay="1.7s">
							<img src="img/SixPage/Yun.png" alt="" />
						</div>
						<div class="ani daiyan" swiper-animate-effect="bounceIn" swiper-animate-duration="1s" swiper-animate-delay="2.0s" style="text-align: center;">
							“我，不是超人”
						</div>
						<div class="ani introduce" swiper-animate-effect="zoomIn" swiper-animate-duration="1s" swiper-animate-delay="2.5s" style="text-align: center;">
							我只是万千程序猿中的一只<br/>我富有激情，喜欢所有新鲜的技术<br/>我热爱生活，喜欢旅行喜欢运动<br/>如果认为我还不错<br/>联系我：wyq_life@yeah.net
						</div>
					</div>

				</div>

			</div>

		</div>

	</body>
		<script src="js/swiper.min.js"></script>
		<script src="js/swiper.animate.min.js"></script>
		<script src="js/rem.js"></script>
		<script src="js/jquery.min.js"></script>
		<script src="js/touch.js"></script>
		<script src="js/fakeLoader.min.js"></script>
		<script>
			var mySwiper = new Swiper ('.swiper-container', {
			   direction : 'vertical',
			   pagination: '.swiper-pagination',
			   paginationType : 'bullets',
			   mousewheelControl : true,
			   onInit: function(swiper){
			   		swiperAnimateCache(swiper);
			  	 	swiperAnimate(swiper);
				},
			   onSlideChangeEnd: function(swiper){
					swiperAnimate(swiper);
			  	 }
			  });
			  touch.on('.swiper-wrapper', 'tap', function(){
    			if(mySwiper.activeIndex==1){
		  				setTimeout(function(){
		  					$(".ready").css({opacity:1});
		  				},3900);

			  	}else{
			  		$(".ready").css({opacity:0});


			  	}
			});

		</script>
		<script>
			$(document).ready(function() {
				$(".fakeloader").fakeLoader({
					timeToHide: 800,
					bgColor: "#0062b8",
					spinner: "spinner5"
				});
				var mp3 = $(".radio")
				var myAudio = $("#myAudio")[0]
				var flage = 1

				function auto() {
					if (flage == 1) {
						if (myAudio.paused) {
							myAudio.play();
						}
						$(".radio").css({
							background: "url('http://wyqlife.top/weichat1/img/yinyue.gif') no-repeat",
							backgroundSize: "cover"
						})
						flage = 0
					}
				}
				$(".tou").on("touchend", auto)
				mp3.click(function() {
					if (myAudio.paused) {
						mp3.className = "pause";
						myAudio.play();
					} else {
						mp3.className = "play";
						myAudio.pause();
					}
					if (myAudio.paused) {
						$(".radio-img").css("animation-play-state", "paused");
						$(".radio").css({
							background: "none"
						})
						flage = 0;
					} else {
						$(".radio-img").css("animation-play-state", "running");
						$(".radio").css({
						
						})
						flage = 1;
					}
				})
				var myvideo = $("#myVideo")[0];
				$("#myVideo").on("click", function() {
					var myvideo = $("#myVideo")[0];
					if (myAudio.paused) {
						mp3.className = "pause";
						myAudio.play();
					} else {
						mp3.className = "play";
						myAudio.pause();
					}
					if (myvideo.paused) {
						myvideo.play()
						$(".vide-btn").css({
							opacity: 0
						})
						$(".meng").css({
							display: "none"
						})
					} else {
						myvideo.pause()
						$(".vide-btn").css({
							opacity: 1
						})
						$(".meng").css({
							display: "block"
						})
					}
				})
				$(".vide-btn").on("click", function() {
					var myvideo = $("#myVideo")[0];
					if (myAudio.paused) {
						mp3.className = "pause";
						myAudio.play();
					} else {
						mp3.className = "play";
						myAudio.pause();
					}
					if (myvideo.paused) {
						myvideo.play()
						$(".vide-btn").css({
							opacity: 0
						})
						$(".meng").css({
							display: "none"
						})
					} else {
						myvideo.pause()
						$(".vide-btn").css({
							opacity: 1
						})
						$(".meng").css({
							display: "block"
						})
					}
				})
			});
		</script>



</html>
